<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>零件种类操作</title>
    <!--jquery-->
    <script src="{{ url_for('static', filename='common/jquery-3.6.0.min.js') }}"></script>
    <!--bootstrap-->
    <script src="{{ url_for('static', filename='common/bootstrap/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='common/bootstrap/bootstrap.min.js') }}"></script>
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='common/bootstrap/bootstrap.min.css') }}">
    <!--页面css-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='make/make.css') }}">
    <script>
        $(document).ready(function () {
            //页面跳转
            $('#btn15').click(function () {
                let name = $("#smallname_forecast").val().trim()
                if (name === '') {
                    $('.tips').html(alert_box(1, '您没有输入任何内容'))
                    return
                }
                let big = name.split(' ')[0]
                let small = name.split(' ')[1]

                show_smallname(big)
            })


            //点击相应的大类后显示小类
            $(document).on('click', '.bigname_button', function () {
                let name = $(this).html()
                show_smallname(name)
            })

            //点击显示全部大类 <button id="bigname_show">显示大类</button>
            $('#bigname_show').click(function () {
                show_bigname()
            })

            //显示大类函数
            function show_bigname() {
                $.ajax({
                    url: "{{ url_for('make.make9') }}",
                    type: 'post',
                    success: function (data) {
                        $('.stateless_table').html(data)
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            }

            //显示小类函数
            function show_smallname(name) {
                $.ajax({
                    url: "{{ url_for('make.make8') }}",
                    type: 'post',
                    data: {
                        'a': name
                    },
                    success: function (data) {
                        $('.stateless_table').html(data)

                        $('#big_name2').val(name)
                        $('#big_name31').val(name)
                        $('#big_name4').val(name)
                        $('#big_name5').val(name)
                        $('#big_name6').val(name)
                        $('#big_name7').val(name)
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            }

            //创建大类（同时创建小类）
            $('#btn1').click(function () {
                let a = $('#big_name1').val().trim()
                let b = $('#small_name1').val().trim()
                let photo = $('#photo1')[0].files[0]

                if (a === '' || b === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }

                let formData = new FormData();
                formData.append('photo', photo);
                formData.append('big_name', a);
                formData.append('small_name', b);
                $.ajax({
                    url: "{{ url_for('make.make1') }}",
                    type: 'post',
                    cache: false,
                    data: formData,
                    processData: false, //为了不让jquery把图片变成字符串
                    contentType: false, //为了不让jQuery处理contentType,自己也别主动把类型写明白，浏览器会自动加，否则会出现问题
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '要创建的大类已经存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(1, '该大类中已经存在该小类'))
                            return
                        }
                        if (data === '3') {
                            $('.tips').html(alert_box(3, '大类创建成功'))
                            show_bigname()
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //创建小类
            $('#btn2').click(function () {
                let a = $('#big_name2').val().trim()
                let b = $('#small_name2').val().trim()
                let photo = $('#photo2')[0].files[0]

                if (a === '' || b === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }

                let formData = new FormData();
                formData.append('photo', photo);
                formData.append('big_name', a);
                formData.append('small_name', b);
                $.ajax({
                    url: "{{ url_for('make.make2') }}",
                    type: 'post',
                    cache: false,
                    data: formData,
                    processData: false, //为了不让jquery把图片变成字符串
                    contentType: false, //为了不让jQuery处理contentType,自己也别主动把类型写明白，浏览器会自动加，否则会出现问题
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '要存入的大类不存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(1, '该小类已经在大类中存在'))
                            return
                        }
                        if (data === '3') {
                            $('.tips').html(alert_box(3, '小类创建成功'))
                            show_smallname(a)
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //重命名大类
            $('#btn3').click(function () {
                let a = $('#big_name31').val()
                let b = $('#big_name32').val()

                if (a === '' || b === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }


                $.ajax({
                    url: "{{ url_for('make.make3') }}",
                    type: 'post',
                    data: {'original_name': a, 'now_name': b},
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '要更改名称的大类不存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(1, '想要变更的新名称已经存在'))
                            return
                        }
                        if (data === '3') {
                            $('.tips').html(alert_box(3, '重命名大类成功'))
                            show_bigname()
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //重命名小类
            $('#btn4').click(function () {
                let a = $('#big_name4').val()
                let b = $('#small_name41').val()
                let c = $('#small_name42').val()

                if (a === '' || b === '' || c === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }

                $.ajax({
                    url: "{{ url_for('make.make4') }}",
                    type: 'post',
                    data: {
                        'big_name': a,
                        'original_small_name': b,
                        'new_small_name': c
                    },
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '小类所在的大类不存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(1, '想要更变名称的小类不存在'))
                            return
                        }
                        if (data === '3') {
                            $('.tips').html(alert_box(1, '想要变更的新名称已经存在'))
                            return
                        }
                        if (data === '4') {
                            $('.tips').html(alert_box(3, '重命名小类成功'))
                            show_smallname(a)
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //删除小类
            $('#btn6').click(function () {
                let a = $('#big_name6').val()
                let b = $('#small_name6').val()

                if (a === '' || b === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }

                $.ajax({
                    url: "{{ url_for('make.make6') }}",
                    type: 'post',
                    data: {'big_name': a, 'small_name': b},
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '要删除的小类所在的大类不存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(1, '要删除小类不存在'))
                            return
                        }
                        if (data === '3') {
                            $('.tips').html(alert_box(3, '删除小类成功'))
                            show_smallname(a)
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //删除大类

            $('#btn5').click(function () {
                var a = $('#big_name5').val()

                if (a === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }

                $.ajax({
                    url: "{{ url_for('make.make5') }}",
                    type: 'post',
                    data: {'big_name': a},
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '要删除的大类不存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(3, '删除大类成功'))
                            show_bigname()
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //更换图片
            $('#btn7').click(function () {
                let a = $('#big_name7').val()
                let b = $('#small_name7').val()
                let photo = $('#photo7')[0].files[0]

                if (a === '' || b === '') {
                    $('.tips').html(alert_box(1, '您尚有内容未填写'))
                    return
                }

                let formData = new FormData();
                formData.append('photo', photo);
                formData.append('big_name', a);
                formData.append('small_name', b);
                $.ajax({
                    url: "{{ url_for('make.make7') }}",
                    type: 'post',
                    cache: false,
                    data: formData,
                    processData: false, //为了不让jquery把图片变成字符串
                    contentType: false, //为了不让jQuery处理contentType,自己也别主动把类型写明白，浏览器会自动加，否则会出现问题
                    success: function (data) {
                        if (data === '1') {
                            $('.tips').html(alert_box(1, '要修改图片的小类所在的大类不存在'))
                            return
                        }
                        if (data === '2') {
                            $('.tips').html(alert_box(1, '要修改图片的小类不存在'))
                            return
                        }
                        if (data === '3') {
                            $('.tips').html(alert_box(1, '您没有上传图片'))
                            return
                        }
                        if (data === '4') {
                            $('.tips').html(alert_box(3, '图片更换成功'))
                            show_smallname(a)
                        }
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                    }
                })
            })

            //点击弹出新页面查看机组照片
            $(document).on('click', '.photo_button', function () {
                let photo = $(this).attr("photo")
                console.log('{{ url_for('static', filename='picture/') }}' + photo)
                window.open('{{ url_for('static', filename='picture/') }}' + photo, '_blank', '', true)
            })

            //点击弹出对应的提交框子
            $('.b1 button').click(function () {
                let name = $(this).attr('id')
                $('.b2 > div').hide()
                $('div .' + name).show()
            })

            //class="smallname_button"
            //点击序号填充内容
            $(document).on('click', '.smallname_button', function () {
                let num = $(this).attr('id')
                let temp = $("#t1").find("tr[class=" + num + "] > td")
                // 去除字符串前后的空格
                let smallname = temp.eq(1).text().trim()

                //填入内容
                $('#small_name41').val(smallname)
                $('#small_name6').val(smallname)
                $('#small_name7').val(smallname)
            })

            //下拉框预测模式
            $("#smallname_forecast").focus(function () {
                $(this).keyup(function (e) {
                    if (e.which === 13) {

                        let smallname = $("#smallname_forecast").val().trim()
                        if (smallname === '') {
                            return
                        }
                        $.ajax({
                            url: "{{ url_for('select.smallname_forecast') }}",
                            type: 'post',
                            data: {
                                'a': smallname,
                            },
                            success: function (data) {
                                $('.forecast').html(data)
                            },
                            error: function () {
                                $('.tips').html(alert_box(1, '系统故障，请刷新重试，若无效请联系管理员'))
                            }
                        })

                    }
                })
            });
        });
    </script>
</head>
<body>
<!--使用定制好的解释框样式-->
{% include 'common/common.html' %}
<!--导航栏-->
{% include 'login/bar.html' %}
<header>
<div class="header_title" style="text-align: center">
        <h1 style="color: #646464">零件管理模块</h1>
    </div>
</header>

<!--第一部分，一般零件-->
<main>
    <div class="box">
        <stateless_part>
            <right>
                <!--页面右侧-->

                <!--选择框-->
                <div class="b1">
                    <div class="btn-group" role="group" aria-label="Basic example"
                         style="width: 100%;margin-bottom: 20px">
                        <button type="button" class="btn btn-success" id="make1">创建大类</button>
                        <button type="button" class="btn btn-success" id="make2">创建小类</button>
                    </div>
                    <div class="btn-group" role="group" aria-label="Basic example"
                         style="width: 100%;margin-bottom: 20px">
                        <button type="button" class="btn btn-outline-danger" id="make5">删除大类</button>
                        <button type="button" class="btn btn-outline-danger" id="make6">删除小类</button>
                    </div>
                    <div class="btn-group" role="group" aria-label="Basic example"
                         style="width: 100%;margin-bottom: 20px">
                        <button type="button" class="btn btn-outline-dark" id="make3">重命名大类</button>
                        <button type="button" class="btn btn-outline-dark" id="make4">重命名小类</button>
                    </div>
                    <div class="btn-group" role="group" aria-label="Basic example"
                         style="width: 100%;margin-bottom: 20px">
                        <button type="button" class="btn btn-outline-dark" id="make7">更换照片</button>
                    </div>
                </div>

                <!--显示部分-->
                <div class="b2">
                    <div class="make1">
                        <h4>创建大类<br>（须同时创建一个小类）</h4>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">大类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name1" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">小类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="small_name1" autocomplete="new-complete">
                        </div>
                        <input type="file" class="custom-file-input" id="photo1"
                               aria-describedby="inputGroupFileAddon04" accept="image/jpeg,image/png">
                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn1" style="width: 100%">提交</button>
                        </div>

                    </div>

                    <div class="make2" style="display: none">
                        <h4>创建小类</h4>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">大类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name2" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">小类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="small_name2" autocomplete="new-complete">
                        </div>
                        <input type="file" class="custom-file-input" id="photo2"
                               aria-describedby="inputGroupFileAddon04" accept="image/jpeg,image/png">
                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn2" style="width: 100%">提交</button>
                        </div>
                    </div>


                    <div class="make3" style="display: none">
                        <h4>重命名大类</h4>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">原名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name31" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">新名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name32" autocomplete="new-complete">
                        </div>
                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn3" style="width: 100%">提交</button>
                        </div>
                    </div>


                    <div class="make4" style="display: none">
                        <h4>重命名小类</h4>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">大类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name4" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">原名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="small_name41" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">新名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="small_name42" autocomplete="new-complete">
                        </div>

                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn4" style="width: 100%">提交</button>
                        </div>
                    </div>

                    <div class="make5" style="display: none">
                        <h4>删除大类</h4>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">大类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name5" autocomplete="new-complete">
                        </div>
                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn5" style="width: 100%">提交</button>
                        </div>
                    </div>

                    <div class="make6" style="display: none">
                        <h4>删除小类</h4>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">大类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name6" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">小类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name6" autocomplete="new-complete">
                        </div>
                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn6" style="width: 100%">提交</button>
                        </div>
                    </div>

                    <div class="make7" style="display: none">
                        <h4>更换图片</h4>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">大类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="big_name7" autocomplete="new-complete">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">小类名称</span>
                            </div>
                            <input type="text" class="form-control" aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-default" id="small_name7" autocomplete="new-complete">
                        </div>
                        <input type="file" class="custom-file-input" id="photo7"
                               aria-describedby="inputGroupFileAddon04" accept="image/jpeg,image/png">
                        <div style="margin-top: 20px">
                            <button type="button" class="btn btn-outline-dark" id="btn7" style="width: 100%">提交</button>
                        </div>
                    </div>
                </div>
            </right>
            <left>
                <!--页面左侧-->
                <h2>无状态零件区域</h2>

                <br>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">小类名称</span>
                    </div>
                    <input type="text" aria-label="First name" class="form-control" list="forecast"
                           id="smallname_forecast"
                            autocomplete="new-complete">
                    <button class="btn btn-outline-success" type="submit" id="btn15">跳转</button>
                    <button class="btn btn-outline-success" type="submit" id="bigname_show">返回大类</button>
                </div>
                <br>

                <div class="forecast">
                    {% include 'select/smallname_forecast.html' %}
                </div>

                <!--存放图表的区域-->
                <div class="stateless_table">
                    {% include 'make/bigname_table.html' %}
                </div>

            </left>
            <div style="clear: both;"></div>
        </stateless_part>
    </div>


    {#    <header>#}
    {#        <h2>有状态零件区域</h2>#}
    {#    </header>#}
</main>
<footer>
    &nbsp;
</footer>
</body>
</html>